<template>
    <div class="main">
        <headNav title="修改密码" :isHome="false" :isBack="false"></headNav>
        <div>
            <div class="login" style="margin-top: 0.8rem;">
                <!-- <div class="phoneCont">
                    <input type="password" v-model.trim="oldPwd" placeholder="请输入原密码" name="">
                </div> -->
                <div class="phoneCont">
                    <input type="passWord" v-model.trim="newPwd" placeholder="请输入新密码，6-20个字符" name="" >
                </div>
                <div class="phoneCont">
                    <input type="passWord" v-model.trim="newPwd2" placeholder="确认新密码" name="">
                </div>
            </div>
        </div>
        <div class="submit" @click="submit">提交</div>
        <!-- <bottomNav :index="5"></bottomNav> -->
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
export default {
    name: 'editPass',
    components: {
        headNav,
        bottomNav
    },
    data () {
        return {
            // oldPwd: '',
            newPwd: '',
            newPwd2: ''
        }
    },
    methods: {
        // 主动修改密码
        submit () {
            if (!this.check()) {
                return 
            }
            let Base64 = require('js-base64').Base64
            var params = {
                password: Base64.encode(this.newPwd)
                // oldPassWord: Base64.encode(this.oldPwd)
            }
            this.$store.dispatch('info/UserUpdatePwd', params).then(
                res => {
                    if (res.status == 200) {
                        this.$toast('修改成功')
                        this.$router.push('login')
                    } else {
                        this.$toast(res.msg)
                    }
                }
            )
        },
        check () {
            // if (!this.oldPwd) {
            //     this.$toast('请输入原始密码')
            //     return false
            // }
            if (!this.newPwd || this.newPwd.length < 6 || this.newPwd.length > 20) {
                this.$toast('请输入6-20个字符的新密码')
                return false
            }
            if (!this.newPwd2) {
                this.$toast('请输入确认密码')
                return false
            }
            if (this.newPwd2 !== this.newPwd) {
                this.$toast('两次输入的新密码不一致')
                return false
            }
            return true
        }
    }

}
</script>
<style scoped>
.main{
    background:#fff;
    height: 100%;
}
.verTit{
    font-size: 0.44rem;
    color: #222222;
    margin-left: 0.48rem;
    font-weight: bold;
    margin-top: 0.72rem;
}
.phoneCont{
    width: 6.3rem;
    height: 0.84rem;
    border-bottom: 1px solid #EEEEEE;
    margin: 0 auto;
    margin-top: 0.2rem;
}
.phoneCont img{
    width: 0.28rem;
    height: 0.32rem;
    float: left;
    margin: 0.22rem 0.27rem;
    vertical-align: middle;
}
.phoneCont input{
    float: left;
    margin: 0.15rem 0;
    height: 0.5rem;
    width: 3.8rem;
    border: none;
    font-size: 0.3rem;
    padding-left: 0.1rem;
    line-height: 0.5rem;
    vertical-align: middle;
}
.phoneCont span{
   float: right;
   color: #4B7BF9;
   font-size: 0.28rem;
   margin-top: 0.14rem;
}
.submit{
    width: 5.41rem;
height: 0.84rem;
line-height: 0.84rem;
text-align: center;
color: #fff;
font-size: 0.32rem;
background: linear-gradient(-90deg, #3A42E4,#4C82F1);
border-radius: 0.33rem;
margin: 0 auto;
margin-top: 0.6rem;
}
</style>